<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-02-20 15:00:48
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-03-18 19:53:43
 * @FilePath: /XMate-h5/src/views/myXmate/myTeam/teamCustomer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="team-report">
    <!-- 筛选区域 -->
    <van-sticky class="bg-white">
      <van-dropdown-menu class="filter-menu" active-color="#436BFF">
        <van-dropdown-item
          v-model="params.reportType"
          :options="reportTypeOptions"
          :title="currentReportTypeText"
          @change="getData()"
        />
        <van-dropdown-item
          v-model="params.dateRange"
          :title="currentDateRangeText"
          @open="handleOpenCalendar"
        />
      </van-dropdown-menu>
    </van-sticky>

    <!-- 报告列表 -->
    <div class="report-list px-4 mt-4">
      <div
        class="flex flex-col justify-between bg-white mb-4 overflow-hidden rounded-md shadow-sm cursor-pointer"
        v-for="item in reportList"
        :key="item.id"
        @click="handleReportClick(item)"
      >
        <div
          class="flex flex-row items-center h-[40px] px-4 mb-2 bg-gradient-to-r from-[#F9FBFF] to-[transparent]"
        >
          <van-icon name="description" class="mr-2 text-primary text-lg" />
          <span class="text-[14px] text-[#999] mr-2"
            >{{ item.startDate }} ~ {{ item.endDate }}</span
          >
        </div>
        <span class="font-medium text-[16px] flex-1 px-4 pt-2 pb-4">{{
          item.title
        }}</span>
      </div>
    </div>

    <!-- 空状态 -->
    <van-empty v-if="reportList.length === 0" description="暂无报告数据" />

    <!-- 日期选择弹窗 -->
    <!-- :default-date="[params.startTime, params.endTime]" -->
    <van-calendar
      v-model:show="showCalendar"
      type="range"
      switch-mode="year-month"
      :show-confirm="true"
      :default-date="cp_defaultDateArray"
      @confirm="onDateConfirm"
      color="#436bff"
      title="选择日期范围"
      confirm-text="确定"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import dayjs from "dayjs";
import { useMyXmateStore } from "@/store";
import {
  getDefaultDateRange,
  formatCompletionTime,
  ParameterDateType,
} from "@/utils/timeTool";

const myXmateStore = useMyXmateStore();
const router = useRouter();
const showCalendar = ref(false);

const page = ref(1);
const params = reactive({
  reportType: "",

  startTime: formatCompletionTime(
    getDefaultDateRange().startDate,
    ParameterDateType.START_DATE
  ),
  endTime: formatCompletionTime(
    getDefaultDateRange().endDate,
    ParameterDateType.ENE_DATE
  ),
  asc: false,
  orderBy: "",
  pageNumber: page.value,
  pageSize: 20,
});

const cp_defaultDateArray = computed(() => {
  const defaultDate = [params.startTime, params.endTime];
  if (Array.isArray(defaultDate)) {
    return defaultDate.map((date) =>
      typeof date === "string" ? dayjs(date).toDate() : date
    );
  }

  return typeof defaultDate === "string" ? dayjs(defaultDate).toDate() : defaultDate;
});

// 报告类型选项
const reportTypeOptions = [
  { text: "全部报告", value: "" },
  { text: "周团队效能分析报告", value: "weekly" },
  { text: "月团队效能分析报告", value: "monthly" },
  { text: "季度团队效能分析报告", value: "quarterly" },
  { text: "年度团队效能分析报告", value: "yearly" },
];

const titleTypeMap = {
  weekly: "每周团队效能分析报告",
  monthly: "每月团队效能分析报告",
  quarterly: "季度团队效能分析报告",
  yearly: "年度团队效能分析报告",
};

const reportList = computed(() => {
  return myXmateStore.teamReportList.map((v) => {
    console.log("");
    return {
      ...v,
      title: titleTypeMap[v.reportType],
    };
  });
});

// 当前选中的报告类型文本
const currentReportTypeText = computed(() => {
  const selectedOption = reportTypeOptions.find(
    (option) => option.value === params.reportType
  );
  return selectedOption ? selectedOption.text : "全部报告";
});

// 当前选中的日期范围文本
const currentDateRangeText = computed(() => {
  if (!params.startTime?.length) {
    return "时间";
  }
  return `${dayjs(params.startTime).format("MM-DD")} 至 ${dayjs(params.endTime).format(
    "MM-DD"
  )}`;
});

function getData() {
  myXmateStore.getTeamReportListAction(params);
}

// 处理打开日历
const handleOpenCalendar = () => {
  showCalendar.value = true;
};

// 日期选择确认
const onDateConfirm = ([start, end]) => {
  params.startTime = formatDate(start);
  params.endTime = formatDate(end);
  showCalendar.value = false;
  getData();
};

// 点击报告跳转
const handleReportClick = (report) => {
  console.log("report", report);
  router.push({
    name: `teamReport`,
    query: {
      type: report.reportType,
      reportTime: report.reportTime,
      st: report.startDate,
      et: report.endDate,
    },
  });
};

onMounted(() => {
  // TODO: 获取报告列表数据
  getData();
});

function formatDate(date) {
  const options = {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
    hour12: false,
  };
  return new Intl.DateTimeFormat("zh-CN", options)
    .format(date)
    .replace(/\//g, "-")
    .replace(/,/, " ");
}
</script>

<style lang="less" scoped>
.team-report {
  .text-primary {
    color: #436bff;
  }

  .bg-gradient {
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
  }

  :deep(.filter-menu) {
    justify-content: flex-start;

    .van-dropdown-menu__bar {
      box-shadow: none;
      background: transparent;
    }

    .van-dropdown-menu__item {
      flex: none;
      min-width: 120px;
      margin-right: 12px;
    }
  }

  :deep(.report-cell) {
    margin-bottom: 12px;
    padding: 16px;
    border-radius: 8px;
    background-color: #fff;

    // 移除默认边框
    &::after {
      display: none;
    }

    // 右箭头图标样式
    .van-cell__right-icon {
      color: #999;
      font-size: 16px;
    }

    // 点击效果
    &:active {
      background-color: #f5f5f5;
    }

    // 阴影效果
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
}
</style>
